import React from 'react';
import './index.less';
import { Form, Button, Input, Toast } from 'antd-mobile'
import { useNavigate } from 'umi';
import { regUser } from '@/api'
export default function Page() {
  const navigate = useNavigate();
  const userReg = (params: any) => {
    regUser(params).then(res => {
      if(res.data.code === 0) {
        Toast.show({
          content: '用户注册成功',
          icon: 'success',
          afterClose: () => {
            navigate('/login', {replace: true})
          }
        })
      }
    })
    
  }
  return (
    <div>
      <Form
        onFinish={
          userReg
        }
        layout='horizontal'
        footer={
          <>
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
            <Button block type='reset' color='danger' size='large'>
              重置
            </Button>
          </>
        }
      >
        <Form.Item
          name='username'
          label='用户名'
          rules={[{ required: true, message: '用户名不能为空' }]}
        >
          <Input placeholder='请输入姓名' />
        </Form.Item>
        <Form.Item
          name='pwd'
          label='密码'
          rules={[{ required: true, message: '密码不能为空' }]}
        >
          <Input type='password' placeholder='请输入密码' />
        </Form.Item>
      </Form>
      <a href="javscript:;" onClick={
        () => {
          navigate('/login')
        }
      }>直接登录</a>
    </div>
  );
}
